<template>
	<view>
		<view class="status-box">
			<view class="status">
				{{data.statusName}}
			</view>
			<view class="tip">
				{{data.statusDetails}}
			</view>
		</view>
		<view class="address-box row deliver" v-if="data.status == 15 ||data.status == 16">
			<image src="../../static/img/sh.png" mode="" class="dw"></image>
			<view class="info">
				<view class="">
					<text class="name">送货类型：{{data.deliveryType == 0 ? '快递配送':'公司自送'}}</text>
				</view>
				<view class="address">
					送货日期：{{data.deliveryTime}}
				</view>
				<view class="address">
					快递公司：{{data.deliveryCompany}}
				</view>
				<view class="address">
					运送单号：{{data.logisticsNo}}
				</view>
			</view>
		</view>
		<view class="address-box row">
			<image src="../../static/img/dw.png" mode="" class="dw"></image>
			<view class="info">
				<view class="">
					<text class="name">{{data.name}}</text>
					<text class="tel">{{data.mobile}}</text>
				</view>
				<view class="address">
					{{data.address}}
				</view>
			</view>
		</view>
		<view class="info-box">
			<view class="good-case">
				<view class="good-item row" v-for="(item,index) in data.headGoodsList" :key="index">
					<view class="left row">
						<image :src="item.titleImg" mode="aspectFill" class="goods-img"></image>
						<view class="content">
							<view class="title">
								{{item.goodsName}}
							</view>
							<view class="color">
								规格：{{item.sku}}
							</view>
						</view>
					</view>
					<view class="right">
						<view class="day-rent">
							租赁金额：{{item.rentPrice}}元/天
							<view class="amount">
								x{{item.quantity}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-bar row">
				<text class="title">租赁时长 </text>
				<text>{{data.rentDay}}天</text>
			</view>
			<view class="info-bar row">
				<text class="title">押金</text>
				<text>￥{{data.depositPrice}}</text>
			</view>
			<view class="info-bar row">
				<text class="title">总租金</text>
				<text>￥{{data.sumRentPrice}}</text>
			</view>
			<view class="info-bar row">
				<text class="title">运费</text>
				<text>￥{{data.expressFee}}</text>
			</view>
			<view class="info-bar row">
				<text class="title">已付金额</text>
				<text>￥{{data.payMoney}}</text>
			</view>
			<view class="money-bar row">
				<text class="intro">需付金额</text>
				<text class="money">￥{{data.waitMoney}}</text>
			</view>
		</view>
		<picker :range="payTypeList" :value="index" range-key="title" @change="pickType" v-if="data.status == 13">
			<view class="picker row">
				<view class="pick-bar row">
					<text>付款类型</text>
					<text>{{payWay}}</text>
				</view>
				<view class="right-arrow center">
					<image src="../../static/img/more2.png" mode=""></image>
				</view>
			</view>
		</picker>
		<view class="picker row" v-if="data.status !=12 && data.status != 13">
			<view class="pick-bar row">
				<text>付款类型</text>
				<text>{{data.payWay == 0 ? '一次付清':'部分付清'}}</text>
			</view>
			<view class="right-arrow center">
				<image src="../../static/img/more2.png" mode=""></image>
			</view>
		</view>
		<view class="order-info">
			<view class="title">
				订单信息
			</view>
			<view class="value" v-if="data.status == 16 || data.status == 17 || data.status == 18">租赁开始日期：{{data.headGoodsList[0].stime}}</view>
			<view class="value" v-if="data.status == 16 || data.status == 17 || data.status == 18"> 租赁结束日期：{{data.headGoodsList[0].etime}} </view>
			<view class="value" v-if="data.status == 18">
				 更换说明：{{}}
			</view>
			<view class="value" v-if="data.status == 18">
				更换日期：{{}} 
			</view>
			<view class="value">订单来源：{{data.orderSource==1 ? '微信下单': '手工录入'}}</view>
			<view class="value">订单类型：{{data.orderType ==2 ? '租赁订单':'出售订单'}} </view>
			<view class="value">订单编号：{{data.orderSn}}</view>
			<view class="value" v-if="data.status != 12">备注：{{data.remark=='' ? '无备注信息':data.remark}}</view>
		</view>
		<view class="footer row" v-if="data.status == 12">
			<view class="cancel-btn" @click="cancel">
				取消
			</view>
		</view>
		<view class="footer row" v-if="data.status == 13">
			<view class="pay-btn" @click="pay">
				支付
			</view>
			<view class="cancel-btn" @click="cancel">
				取消
			</view>
		</view>
		<view class="footer row" v-if="data.status !=12 && data.status != 13">
			<view class="pay-btn" @click="contact">
				联系客服
			</view>
			<view class="cancel-btn" v-if="data.status == 16 || data.status == 17" @click="open()">
				退租
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<view class="close-icon" @click="closeBtn">
					<image src="../../static/img/gb.png" mode=""></image>
				</view>
				<view class="title">
					申请退租
				</view>
				<view class="input-bar row">
					<text class="sc-title">退租类型： </text>
					<picker  :range="returnRent" :value="idx" range-key="title" @change="pickReturn" class="pp">
						<view class="pp-box" v-if="rentType == ''">请选择退租类型</view>
						<view class="pp-box" v-else>{{rentType}}</view>
						<image src="../../static/img/more2.png" mode=""></image>
					</picker>
				</view>
				<view class="sc-title">
					请选择需要退租得商品：
				</view>
				<view class="uni-list">
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd row" v-for="item in items" :key="item.id">
							<view>
								<checkbox :value="item.id" :checked="item.checked" color="#D93011" style="transform:scale(0.7)" />
							</view>
							<view class="check-box row">
								<image :src="item.titleImg" mode=""></image>
								<view class="right">
									<view class="name">
										{{item.goodsName}}
									</view>
									<view class="color">
										规格：{{item.sku}}
									</view>
									<!-- <view class="size">
										尺寸：{{item.size}}
									</view> -->
								</view>
							</view>
						</label>
					</checkbox-group>
				</view>
				<view class="sc-title">
					退租理由：
				</view>
				<textarea :value="content" @input="importContent" @blur="importContent" />
				<view class="btn" @click="tuiRent()">
					确定
				</view>
				</view>
		</uni-popup>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		data() {
			return {
				data:{},
				status: 6, //6待审核,0待支付,1待发货,2配送中,3租赁中
				payWay: "一次付清",
				payWayId:0,
				payTypeList: [{
					id: 0,
					title: "一次付清"
				}, {
					id: 1,
					title: "部分付清"
				}],
				rentType: "",
				returnId:null,
				returnRent:[{
					id:1,
					title:"整批退租"
				},{
					id:2,
					title:"分批退租"
				}],
				items:[],
				itemsList:[],
				content:"",
				rentGoodsId:"",
				customerMobile:""
			};
		},
		onLoad(e){
			this.orderSn = e.orderSn
		},
		onShow(){
			comm.request("POST", "/public/customerMobile", {}, (res, data) => {
				console.log("客服电话", res)
				if (res.data.ret_code == 200) {
					this.customerMobile = data.mobile
				} 
			})
			this.getData()
		},
		onPullDownRefresh (){
			this.getData()
			uni.stopPullDownRefresh()
		},
		methods: {
			getData(){
				let data = {orderSn:this.orderSn}
				comm.request("POST", "/app/order/getOrder", data, (res, data) => {
					console.log("订单详情", res)
					if (res.data.ret_code == 200) {
						data.rentDay = data.headGoodsList[0].rentDay
						this.data = data
						data.headGoodsList.forEach(e=>{
							e.checked = false
						})
						this.items = data.headGoodsList
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
			pickType(e) {
				console.log(e)
				this.payWay = this.payTypeList[e.detail.value].title
				this.payWayId = this.payTypeList[e.detail.value].id
			},
			open() {
				this.$refs.popup.open()
			},

			closeBtn() {
				this.$refs.popup.close()
			},
			//退租类型
			importRentType(e) {
				this.rentType = e.detail.value
			},
			pickReturn(e){
				// if(this.items.length ==1){
				// 	if(e.detail.value == 1)
				// 	{
				// 		comm.showToast()
				// 	}
				// 	this.rentType = this.returnRent[0].title
				// 	this.returnId = this.returnRent[0].id
				// 	return
				// }
				this.rentType = this.returnRent[e.detail.value].title
				this.returnId = this.returnRent[e.detail.value].id
			},
			//选择退租商品
			checkboxChange(e) {
				var items = this.items,
					values = e.detail.value;
					console.log(e)
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					console.log(item,"item====")
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.itemsList = values
			},
			//退租理由
			importContent(e){
					this.content = e.detail.value
			},
			//退租
			tuiRent(){
				var that = this;
				if(this.rentType == ''){
					comm.showToast("请选择退租类型","none")
				}else if(this.itemsList.length == 0){
					comm.showToast("请选择退租商品","none")
				}else{
					let list = []
					this.itemsList.forEach(e=>{
						let obj = {id:e}
						list.push(obj)
					})
					console.log(list)
					uni.showModal({
						title: '温馨提示',
						content: '您确定退租吗',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								let data = {
									orderSn:that.orderSn,
									rentRemark:that.content,
									rentType:that.returnId,
									rentGoodsId:list
								}
								comm.request("POST", "/app/order/refundRent", data, (res, data) => {
									console.log("退租", res)
									if (res.data.ret_code == 200) {
										comm.showToast("退租成功")
										that.getData()
										that.closeBtn()
									} else {
										comm.showToast(res.data.ret_msg, "none")
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								comm.showToast(res.data.ret_msg, "您取消了退租")
								that.closeBtn()
							}
						}
					})
				}
			},
			//支付
			pay() {
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '您确定支付吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderSn: that.orderSn,
								payWay: that.payWayId
							}
							comm.request("POST", "/app/order/getPay", data, (res, data) => {
								console.log("微信支付", res)
								if (res.data.ret_code == 200) {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: data.timeStamp,
										nonceStr: data.nonceStr,
										package: "prepay_id=" + data.prepayId,
										signType: "HMAC-SHA256",
										paySign: data.sign,
										success(res) {
											comm.showToast("支付成功")
											that.getData()
										},
										fail(res) {
											console.log("支付失败");
											comm.showToast("支付失败", "none")
										},
									});
								} else {
									comm.showToast(res.data.ret_msg, "none")
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//取消订单
			cancel(){
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '您确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderSn: that.orderSn,
							}
							comm.request("POST", "/app/order/cancelOrder", data, (res, data) => {
								console.log("取消订单", res)
								if (res.data.ret_code == 200) {
									comm.showToast("取消成功")
									that.getData()
								} else {
									comm.showToast(res.data.ret_msg, "none")
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				},
				contact(){
					var that = this;
					uni.makePhoneCall({
						// 手机号
						phoneNumber: that.customerMobile,
					
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					});
				}
		}
			
	}
</script>

<style lang="less">
	.status-box {
		padding: 30rpx;
		background: #D93011;

		.status {
			font-size: 38rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			margin-bottom: 20rpx;
		}

		.tip {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.address-box {
		background: rgba(255, 255, 255, 1);
		// border-radius: 20rpx;
		padding: 30rpx;
		justify-content: space-between;

		.dw {
			width: 64rpx;
			height: 64rpx;
			margin-right: 30rpx;
		}

		.info {
			flex: 1;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: rgba(25, 17, 11, 1);
				margin-right: 30rpx;
			}

			.tel,
			.address {
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
				word-break: break-word;
			}

			.address {
				margin-top: 10rpx;
			}
		}
	}

	.deliver {
		padding: 30rpx 0;
		margin: 0 30rpx;
		align-items: flex-start;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.info-box {
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding: 30rpx;
		// border-bottom:14rpx solid #F9F9F8 ;
		border-top: 14rpx solid #F9F9F8;

		.good-case {
			border-bottom: 1rpx solid #EEEEEE;
			margin-bottom: 30rpx;

			.good-item {
				margin-bottom: 30rpx;
				justify-content: space-between;
				align-items: flex-start;

				.left {
					flex: 1;
					align-items: flex-start;

					.goods-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						background: #F9F9F8;
						margin-right: 30rpx;
					}

					.content {
						flex: 1;

						.title {
							font-size: 24rpx;
							color: rgba(51, 51, 51, 1);
						}

						.color,
						.size {
							font-size: 20rpx;
							color: rgba(153, 153, 153, 1);
							margin-top: 10rpx;
						}
					}
				}

				.right {
					text-align: right;

					.day-rent {
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);

						text {
							font-size: 26rpx;
						}
					}

					.amount {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
		}

		.info-bar {
			justify-content: space-between;
			font-size: 22rpx;
			color: #999999;
			margin: 10rpx 0;

			.title {
				width: 130rpx;
			}
		}

		.money-bar {
			justify-content: space-between;
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #333333;
		}
	}

	.picker {
		padding: 30rpx;
		border-top: 14rpx solid #F9F9F8;
		justify-content: space-between;

		.pick-bar {
			flex: 1;
			justify-content: space-between;

			text {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.right-arrow {
			width: 12rpx;
			height: 21rpx;
			margin-left: 20rpx;

			image {
				width: 12rpx;
				height: 21rpx;
			}
		}
	}

	.order-info {
		padding: 30rpx;
		padding-bottom: 120rpx;
		border-top: 14rpx solid #F9F9F8;

		.title {
			color: #333333;
			font-size: 28rpx;
		}

		.value {
			color: #999999;
			font-size: 22rpx;
			margin-top: 20rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		justify-content: flex-end;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 99;

		.pay-btn,
		.cancel-btn {
			// width:167rpx;
			// height: 60rpx;
			// line-height: 60rpx;
			padding: 10rpx 30rpx;
			text-align: center;
			border-radius: 30rpx;
			font-size: 26rpx;
		}

		.pay-btn {
			background: rgba(217, 48, 17, 1);
			color: #FFFFFF;
			margin-right: 30rpx;
		}

		.cancel-btn {
			border: 1rpx solid rgba(217, 48, 17, 1);
			color: #D93011;
		}
	}

	.popup-wrap {
		width: 690rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 30rpx;
		position: relative;
		margin: 0 auto;

		.close-icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 38rpx;
		}

		.sc-title {
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
		}

		.input-bar {
			justify-content: space-between;
			margin-bottom: 30rpx;
			text {
				width: 160rpx;
			}

			input,.pp {
				flex: 1;
				border: 1rpx solid rgba(225, 225, 225, 1);
				border-radius: 4rpx;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				color: #333333;
				padding-right:40rpx;
				position: relative;
				image{
					width: 12rpx;
					height: 21rpx;
					position: absolute;
					right:20rpx;
					top:50%;
					margin-top:-10.5rpx;
					transform: rotate(90deg);
				}
			}
		}
		.uni-list-cell-pd{
			margin:30rpx 0;
			align-items: flex-start;
			}
		.check-box{
			align-items: flex-start;
			image{
				width:120rpx;
				height:120rpx;
				border-radius:10rpx;
				margin:0 20rpx;
				background: #999999;
			}
			.right{
				.name{
					font-size:24rpx;
					color:rgba(51,51,51,1);
				}
				.color,.size{
					font-size:20rpx;
					color:rgba(153,153,153,1);
					margin-top:10rpx;
				}
			}
		}
		textarea{
			margin:30rpx 0;
			height: 150rpx;
			border: 1rpx solid rgba(225, 225, 225, 1);
			border-radius: 4rpx;
			padding: 10rpx 20rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.btn{
			width:317rpx;
			height:72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size:28rpx;
			color:rgba(255,255,255,1);
			background:rgba(217,48,17,1);
			border-radius:36rpx;
			margin:30rpx auto;
		}
	}
</style>
